<template>
    <div class="app-container">
        <el-form :model="form" label-width="130px" inline size="small">
            <el-form-item label="开始录入日期" label-width="100px">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="截止录入日期">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="ID">
                <el-input v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.region"></el-input>
            </el-form-item>

            <el-form-item label="类型">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="开始修改日期" label-width="100px">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="截止修改日期">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="form.region"></el-input>
            </el-form-item>

            <el-form-item label="教练">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label=" " label-width="100px">
                <el-button type="primary" icon="el-icon-search">查询</el-button>
                <el-button type="primary" plain>+ 新增</el-button>
                <el-button type="info" plain>重置</el-button>
            </el-form-item>
        </el-form>

        <div class="mt-1">
            <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
                <el-tab-pane :label="v.label" :name="v.name" v-for="(v, i) in tabsArr" :key="i"></el-tab-pane>
            </el-tabs>
        </div>

        <div style="height: 590px;">
            <el-table :data="tableData" height="100%" border :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="ID" sortable width="100" align="center">
                    <template slot-scope="scope">
                        <span style="color: #4d4de2;cursor: pointer;" @click="go(scope.row)">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="StateStr" label="进度" sortable width="150" align="center" />
                <el-table-column prop="pno" label="人数" sortable width="150" align="center" />
                <el-table-column prop="ep" label="备注" sortable width="300" align="center" />
                <el-table-column prop="firster" label="录入人" sortable width="180" align="center" />
                <el-table-column prop="firsttime" label="录入日期" sortable width="250" align="center" />
                <el-table-column prop="editer" label="修改人" sortable width="180" align="center" />
                <el-table-column prop="edittime" label="修改日期" sortable width="180" align="center" />
                <el-table-column prop="leader" label="操作" sortable width="150" align="center">

                </el-table-column>

            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagin">
            <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
        </div>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-22 14:50:23  星期三
* @description   
**/

import { ExamSystamAPI } from '@/api/adminstare'
import { oldLoginSystem } from '@/utils/publicMethod'
export default {
    data() {
        return {
            form: {
                region: "",
            },
            tableData: [],
            initParams: {
                action: "examList",
                page: 1,
                pageSize: 20,
                state: "23",//待科目进度的状态
            },
            // 分页总条数
            total: 0,
            tabs: '',
            tabsArr: [
                { label: '总数', name: '0', state: "23" },
                { label: '待科目一', name: '1', state: "23" },
                { label: '待科目二', name: '2', state: "33" },
                { label: '待科目三', name: '3', state: "43" },
                { label: '待科目四', name: '4', state: "53" },
            ],

        }
    },
    mounted() {
        this.getListData()
        this.getTabData() 
    },
    methods: {
        async getListData() {
            const result = await ExamSystamAPI(this.initParams)

            this.tableData = result.data
            this.total = result.total

        },

        // 获取待科目进度 tab
        async getTabData() {
            const result = await ExamSystamAPI({ action: 'examStateList' })
            // console.log(result);

            this.tabsArr[0].label += `(${result.data[0].sum}) `//全部
            this.tabsArr[1].label += `(${result.data[0].sumstate_20}) `//
            this.tabsArr[2].label += `(${result.data[0].sumstate_30}) `//
            this.tabsArr[3].label += `(${result.data[0].sumstate_40}) `//
            this.tabsArr[4].label += `(${result.data[0].sumstate_50}) `//
        },

        go(event) { 
            const redirectUrl = 'http://jx.qida999.com/DriverCommon/Area/GDHZ/DrTextReady1.html?ver=1700733235276&id=1279232&aid=101'
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },

        // tab选项变化
        handleClick(tab) {
            const index = tab.index
            this.tabsArr.forEach((v, i) => {
                if (i == index) {
                    this.initParams.state = v.state
                    this.getListData()
                }
            })
        },

        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
